<template>
	<a-card :bordered="false">
		<a-row :gutter="24">
			<a-col :md="3">
				<div class="table-operator">
					<div style="border-color: #0077aa">
						<a-dropdown :trigger="['contextmenu']">
							<a-tree @select="onSelect" :treeData="treeData" :selectedKeys="selectedKeys" @rightClick="rightClick">
							</a-tree>
							<a-menu slot="overlay" v-action:content:save>
								<a-menu-item
									:key="pmodel.code"
									v-for="pmodel in publishModels"
									:disabled="!rightItem.attributes.allowContribute"
									@click="createCate(pmodel)"
								>
									<a-icon type="folder-add" />
									<span>创建内容({{ pmodel.value }})</span>
								</a-menu-item>

								<a-menu-item key="4" v-if="rightItem.id === '0'" @click="initTreeCategory">
									<a-icon type="reload" />
									<span>刷新栏目</span>
								</a-menu-item>
							</a-menu>
						</a-dropdown>
					</div>
				</div>
			</a-col>
			<!-- <div style="margin-left: 14%;color: red;"> PS:右键栏目 创建内容 (部分栏目不支持创建内容) 如要体验微信同步或者头条同步请右键下方 【内容转载】栏目 创建文章体验</div> -->
			<a-col :md="21">
				<a-card :bordered="false" title="">
					<div style="margin-bottom: 5px">
						<!-- slot="extra" -->
						<a-button type="primary" v-action:content:dels style="margin-left: 5px" size="small" @click="deletes">
							<a-icon type="delete" />批量删除</a-button
						>
						<a-button
							type="primary"
							v-action:content:publish
							style="margin-left: 5px"
							size="small"
							@click="publish('1')"
						>
							<a-icon type="notification" />批量发布</a-button
						>
						<a-button
							type="primary"
							v-action:content:publish
							style="margin-left: 5px"
							size="small"
							@click="publish('0')"
						>
							<a-icon type="rollback" />批量撤销发布</a-button
						>

						<!-- <a-button type="primary" v-action:content:move style="margin-left: 5px" size="small" @click="batchMove">
              <a-icon type="double-right" />批量移动</a-button> -->

						<!-- <a-button type="primary" v-action:content:batchgen style="margin-left: 5px" size="small" @click="batchGenCid">
              <a-icon type="redo" />批量生成</a-button> -->

						<!-- <a-button type="primary" v-action:content:jobpub style="margin-left: 5px" size="small" @click="timingPub">
              <a-icon type="clock-circle" />定时发布</a-button> -->

						<a-radio-group v-model="status" style="margin-left: 5px" size="small">
							<a-radio-button value="-1">全部</a-radio-button>
							<a-radio-button value="0">草稿</a-radio-button>
							<a-radio-button value="1">已发布</a-radio-button>
						</a-radio-group>
						<a-input-search
							style="margin-left: 16px; width: 180px"
							:allowClear="true"
							placeholder="请输入标题"
							size="small"
							@search="searchKey"
						/>
					</div>

					<s-table
						ref="table"
						size="small"
						rowKey="id"
						bordered
						:scroll="{ x: 1500 }"
						:columns="columns"
						:data="loadData"
						:locale="{ emptyText: '暂无内容' }"
						:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
					>
						>
						<span slot="status" slot-scope="state, record">
							<template>
								<a-tag color="orange" v-if="state == '0'"
									>草稿 {{ record.checkUserName ? '/' + record.checkUserName : '' }}</a-tag
								>
								<a-tag color="red" v-if="state == '1'"
									>已发布{{ record.checkUserName ? '/' + record.checkUserName : '' }}</a-tag
								>
								<a-tag color="red" v-if="state == '2'"
									>已删除{{ record.checkUserName ? '/' + record.checkUserName : '' }}</a-tag
								>
							</template>
						</span>

						<span slot="sort" slot-scope="sort, record">
							<template>
								 <a-input v-model="record.sort" @blur="sortInput(record)"/>
							</template>
						</span>

						<span slot="copied" slot-scope="val">
							<template>
								<a-tag color="orange" v-if="val">转载</a-tag>
								<a-tag color="green" v-else>原创</a-tag>
							</template>
						</span>

						<div slot="custitle" slot-scope="text, item">
							<template>
								<div class="list-content-cover">
									<a-avatar
										style="cursor: pointer"
										@click="preview"
										v-if="item.cover && item.cover.length > 0"
										slot="avatar"
										size="large"
										shape="square"
										:src="item.cover[0].url"
									/>
									<a-avatar style="cursor: pointer" @click="preview" v-else slot="avatar" size="large" shape="square" src="https://yunpiaowucms-1258011756.cos.ap-beijing.myqcloud.com/ticket/暂无图片_f2db2cd3-d43e-499b-8cf6-940a2aeaaf0f.gif"/>
									<!-- src="/tk.jpg" -->
								</div>
								<div class="list-content-title">
									<span v-html="$substr(item.title, 10)"></span><br />
									<div slot="description" v-if="item.description"><span v-html="$substr(item.description, 15)"></span></div>
									<div slot="description" v-else><span v-html="$substr(item.subTitle, 15)"></span></div>
								</div>
							</template>
						</div>

						<span slot="jobDate" slot-scope="text">
							<template>
								<span v-if="text"> <a-icon type="clock-circle" />{{ momentIt(text) }} </span>
								<span v-if="!text"> <a-icon type="close-circle" /> </span>
							</template>
						</span>

						<span slot="cname" slot-scope="text">
							<template>
								<span v-html="$substr(text, 5)"></span>
							</template>
						</span>

						<span slot="modelName" slot-scope="text">
							<template>
								<span v-html="$substr(text, 8)"></span>
							</template>
						</span>

						<span slot="action" slot-scope="text, record">
							<template>
								<a-tag color="orange" v-action:content:edit @click="handleEdit(record)">编辑</a-tag>
								<a-tag color="red" v-action:content:del @click="handleDelete(record)">删除</a-tag>
								<!-- <a-tag color="green" v-action:content:top @click="handleTop(record)">置顶</a-tag> -->
								<!-- <a-tag color="blue" v-action:content:related @click="related(record)">相关推荐</a-tag> -->
								<!-- <a-tag color="blue" v-action:content:view @click="handleView(record.id)">预览</a-tag> -->
							</template>
						</span>
					</s-table>
				</a-card>
			</a-col>
		</a-row>
		<handle ref="handleForm" @ok="handleOk"></handle>
		<related ref="related"></related>
		<top-handle ref="topHandle" @ok="handleOk"></top-handle>
		<job-publish ref="jobPublish"></job-publish>
		<batch-move ref="batchMove" @ok="handleOk"></batch-move>
		<a-modal :visible="previewVisible" :footer="null" @cancel="cancelPreview">
			<img alt="example" style="width: 100%" :src="previewImage" />
		</a-modal>
	</a-card>
</template>

<script>
import moment from 'moment'
import { page, treeCategory, delByPk, delByPks, publish, reStaticBatchGenCid, viewContent,updateSort } from '@/api/site/content'
import { listPublihModel } from '@/api/site/model'
import handle from './handle'
import topHandle from './topHandle'
import related from './related'
import jobPublish from './jobPublish'
import batchMove from './batchMove'
import { STable } from '@/components'
import Input from 'ant-design-vue/es/input'
export default {
	name: 'TableList',
	components: {
		STable,
		handle,
		topHandle,
		related,
		jobPublish,
		batchMove,
	},
	props: {
		statusFilter: {
			type: Function,
			default: undefined,
		},
	},
	data() {
		return {
			mdl: {},
			advanced: false,
			treeData: [],
			selectedKeys: ['0'],
			rightItem: {},
			dropdownVisible: false,
			previewVisible: false,
			previewImage: null,
			status: '-1',
			selectedRowKeys: [],
			selectedRows: [],
			queryParam: {
				dto: {
					categoryId: '0',
				},
			},
			columns: [
				{
					title: '标题',
					dataIndex: 'title',
					width: 330,
					scopedSlots: {
						customRender: 'custitle',
					},
				},
				{
					title: '分类',
					align: 'center',
					dataIndex: 'categoryName',
					scopedSlots: {
						customRender: 'cname',
					},
				},
				// {
				//   title: '模型',
				//   align: 'center',
				//   dataIndex: 'modelName',
				//   scopedSlots: {
				//     customRender: 'modelName'
				//   }
				// },
				// {
				//   title: '转载',
				//   align: 'center',
				//   dataIndex: 'copied',
				//   scopedSlots: {
				//     customRender: 'copied'
				//   }
				// },

				{
					title: '状态/发布人',
					align: 'center',
					dataIndex: 'status',
					scopedSlots: {
						customRender: 'status',
					},
				},
				{
					title: '排序',
					align: 'center',
					dataIndex: 'sort',
					scopedSlots: {
						customRender: 'sort',
					},
				},
				{
					title: '创建日期',
					align: 'center',
					dataIndex: 'gmtCreate',
					customRender: (data) => {
						if (data) return moment(data).format('YYYY-MM-DD HH:mm:ss')
					},
				},
				{
					title: '发布日期',
					align: 'center',
					dataIndex: 'publishDate',
					customRender: (data) => {
						if (data) return moment(data).format('YYYY-MM-DD HH:mm:ss')
					},
				},
				// {
				//   title: '是否定时',
				//   dataIndex: 'jobDate',
				//   scopedSlots: {
				//     customRender: 'jobDate'
				//   }
				// },

				{
					title: '操作',
					dataIndex: 'action',
					fixed: 'right',
					width: '300px',
					scopedSlots: {
						customRender: 'action',
					},
				},
			],
			loadData: (parameter) => {
				return page(Object.assign(parameter, this.queryParam)).then((response) => {
					if (response.code === 0) {
						// console.log(response.res);
						return response.res
					} else {
						return {
							total: 0,
							rows: [],
						}
					}
				})
			},
			pageNo: 1,
			pageSize: 10,
			total: 0,
			publishModels: [],
		}
	},
	watch: {
		status(newValue, oldValue) {
			if (newValue === '-1') {
				this.queryParam.dto.status = null
			} else {
				this.queryParam.dto.status = newValue
			}
			this.handleOk()
		},
	},
	created() {
		this.initTreeCategory()
	},
	methods: {
		initTreeCategory() {
			treeCategory().then((response) => {
				if (response.code === 0) {
					this.treeData = [response.res]
				}
			})
		},
		momentIt(date) {
			if (date) {
				return moment(date).format('YYYY-MM-DD HH:mm:ss')
			}
		},
		listPublihModel(categoryId) {
			listPublihModel({
				categoryId: categoryId,
			}).then((response) => {
				this.publishModels = response.res
				if (this.publishModels.length === 0) {
					if (categoryId !== '0') {
						this.$message.error('该栏目没有选择模型')
					}
				}
			})
		},
		onSelect(selectedKeys, e) {
			if (e.selected) {
				this.selectedKeys = selectedKeys
			}
			this.queryParam.dto.categoryId = e.node.dataRef.id
			this.$refs.table.refresh()
		},
		rightClick(e) {
			this.selectedKeys = [e.node.eventKey]
			this.rightItem = e.node.dataRef
			this.dropdownVisible = true
			this.listPublihModel(e.node.dataRef.id)
			const _this = this
			setTimeout(() => {
				_this.onSelect(this.selectedKeys, e)
			}, 500)
		},
		createCate(pmodel) {
			const categoryId = this.rightItem.id
			this.$refs.handleForm.add(pmodel, categoryId)
		},
		handleDelete(record) {
			const that = this
			this.$confirm({
				title: '操作提醒',
				content: '确定要删除吗?',
				onOk() {
					delByPk({
						id: record.id,
					})
						.then((response) => {
							that.handleOk()
							that.$message.info(response.msg)
						})
						.catch((response) => {
							that.$message.warn(response.msg)
						})
				},
				onCancel() {},
			})
		},
		deletes() {
			if (this.selectedRowKeys.length === 0) {
				this.$message.error('请选择要操作的记录')
				return
			}
			const that = this
			this.$confirm({
				title: '操作提醒',
				content: '确定要删除吗?',
				onOk() {
					delByPks(that.selectedRowKeys)
						.then((response) => {
							if (response.code === 0) {
								that.$message.info(response.msg)
								that.handleOk()
							} else {
								that.$message.error(response.msg)
							}
						})
						.catch((response) => {
							that.$message.warn(response.msg)
						})
				},
				onCancel() {},
			})
		},
		publish(status) {
			if (this.selectedRowKeys.length === 0) {
				this.$message.error('请选择要操作的记录')
				return
			}
			const that = this
			this.$confirm({
				title: '操作提醒',
				content: '确定要执行该操作吗?',
				onOk() {
					publish({
						ids: that.selectedRowKeys,
						status: status,
						rows: that.selectedRows,
					})
						.then((response) => {
							if (response.code === 0) {
								that.$message.info(response.msg)
								that.handleOk()
							} else {
								that.$message.error(response.msg)
							}
						})
						.catch((response) => {
							that.$message.warn(response.msg)
						})
				},
				onCancel() {},
			})
		},
		timingPub() {
			if (this.selectedRowKeys.length === 0) {
				this.$message.error('请选择要操作的记录')
				return
			}
			this.$refs.jobPublish.job(this.selectedRowKeys)
		},
		batchGenCid() {
			const _this = this
			if (this.selectedRowKeys.length === 0) {
				this.$message.error('请选择要操作的记录')
				return
			}
			this.$confirm({
				title: '操作提醒',
				content: '确定要重新生成静态页面?',
				onOk() {
					reStaticBatchGenCid(_this.selectedRowKeys)
						.then((response) => {
							if (response.code === 0) {
								this.$message.info('请稍后~~')
							} else {
								this.$message.warn(response.msg)
							}
						})
						.catch((response) => {
							this.$message.warn(response.msg)
						})
				},
				onCancel() {},
			})
		},
		// handleView(id) {
		// 	viewContent({
		// 		id: id,
		// 	}).then((response) => {
		// 		if (response.code === 0) {
		// 			window.open(response.res, '_blank')
		// 		} else {
		// 			this.$message.error(response.msg)
		// 		}
		// 	})
		// },
		searchKey(key) {
			this.queryParam.dto.title = null
			if (key) {
				this.queryParam.dto.title = key
			}
			this.$refs.table.refresh(true)
			this.unSelect()
			this.$refs.handleForm.hideLoading()
		},
		batchMove() {
			if (this.selectedRowKeys.length === 0) {
				this.$message.error('请选择要操作的记录')
				return
			}
			this.$refs.batchMove.open(this.selectedRowKeys)
		},
		onSelectChange(selectedRowKeys, selectedRows) {
			this.selectedRowKeys = selectedRowKeys
			this.selectedRows = selectedRows
		},
		unSelect() {
			this.selectedRowKeys = []
			this.selectedRows = []
		},
		handleEdit(record) {
			this.$refs.handleForm.edit(record)
		},
		preview(e) {
			this.previewImage = e.target.currentSrc
			this.previewVisible = true
		},
		cancelPreview() {
			this.previewImage = null
			this.previewVisible = false
		},
		handleTop(record) {
			this.$refs.topHandle.top(record)
		},
		related(record) {
			this.$refs.related.open(record)
		},
		handleOk() {
			this.unSelect()
			this.$refs.table.refresh()
			this.initTreeCategory()
			this.$refs.handleForm.hideLoading()
		},
		resetSearchForm() {
			this.queryParam = {
				dto: {},
			}
			this.handleOk()
		},

		sortInput(record) {
			updateSort({
				contentId: record.id,
				sort:record.sort
			}).then((response) => {
				console.log(response);
				location.reload();
			})
		},
	},
}
</script>
<style>
::-webkit-scrollbar-track-piece {
	background-color: whitesmoke !important;
}

::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}

::-webkit-scrollbar-thumb {
	background-color: #e8e8e8 !important;
	background-clip: padding-box;
	min-height: 28px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #e8e8e8 !important;
}

.ant-avatar-lg {
	width: 38px;
	height: 38px;
	line-height: 38px;
}

.list-content-cover {
	width: 15%;
	float: left;
}

.list-content-title {
	width: 80%;
	float: left;
	margin-left: 9px;
	height: 38px;
	line-height: 19px;
}
</style>
